<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { EyeOutlined, HeartOutlined } from "@ant-design/icons-vue";
import type { BlogVo } from "@/type";
import { postApi } from "@/api";
import { filterHtmlTags, stringToArray, truncateString } from "@/utils";
import dayjs from "dayjs";
import { useRouter } from "vue-router";

const router = useRouter();

const tagColors = ["blue", "green", "orange", "purple", "cyan", "magenta"];
const articles = ref<BlogVo[]>([]);

const total = ref(0);
const params = reactive({
  page: 1,
  pageSize: 10,
});

const getArticle = async () => {
  const result = await postApi.getArticle(params);
  console.log(result);
  articles.value = result.rows.map((item: BlogVo) => {
    return {
      ...item,
      tags: stringToArray(item.tags as string),
      createdAt: dayjs(String(item.createdAt)).format("YYYY-MM-DD"),
      excerpt: truncateString(filterHtmlTags(item.excerpt), 100),
    };
  });
  total.value = result.count;
};
const showTag = (tag: string) => {
  // 判断是否是移动端
  if (window.innerWidth < 640) {
    return tag.length > 12 ? tag.slice(0, 12) + "..." : tag;
  } else {
    return tag;
  }
};
onMounted(() => {
  getArticle();
});
</script>

<template>
  <div class="flex-1">
    <!-- 文章列表 -->
    <div class="grid gap-4 sm:gap-6">
      <div
        v-for="(article, index) in articles"
        :key="article.id"
        @click="
          router.push({
            name: 'blogItem',
            params: { id: article.id, title: article.title },
          })
        "
        class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer p-4 sm:p-6 animate__animated animate__fadeInDown"
        :style="`animation-delay: ${index * 0.1}s;`"
      >
        <!-- 移动端改为垂直布局 -->
        <div class="flex flex-col sm:flex-row gap-4 sm:gap-6">
          <!-- 图片区域 -->
          <div class="w-full sm:w-48 h-40 sm:h-32 rounded-lg overflow-hidden">
            <img
              :src="article.coverImage"
              :alt="article.title"
              class="w-full h-full object-cover"
            />
          </div>
          <!-- 内容区域 -->
          <div class="flex-1">
            <h2
              class="text-lg sm:text-xl font-bold mb-2 line-clamp-1 sm:line-clamp-2"
            >
              {{ article.title }}
            </h2>
            <p class="text-gray-500 text-xs sm:text-sm mb-2">
              {{ article.createdAt }}
              <span class="text-blue-600">{{
                article.categoryName || "未分类"
              }}</span>
            </p>
            <p
              class="text-gray-600 text-sm sm:text-base line-clamp-2 sm:line-clamp-3 mb-3 sm:mb-4"
            >
              {{ article.excerpt }}
            </p>
            <div
              class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-0"
            >
              <!-- 标签区域 - 移动端限制显示数量 -->
              <div class="flex gap-2 flex-wrap">
                <a-tag
                  v-for="(tag, tagIndex) in article.tags.slice(0, 3)"
                  :key="tagIndex"
                  :color="tagColors[tagIndex % tagColors.length]"
                  class="text-xs sm:text-sm"
                >
                  <!--{{  }}-->
                  {{ showTag(tag) }}
                </a-tag>
                <span
                  v-if="article.tags.length > 3"
                  class="text-xs text-gray-500"
                  >+{{ article?.tags.length - 3 }}</span
                >
              </div>

              <!-- 统计信息 -->
              <div
                class="flex items-center space-x-3 sm:space-x-4 text-gray-500 text-xs sm:text-sm"
              >
                <span class="flex items-center">
                  <eye-outlined class="text-sm sm:text-base" />
                  <span class="ml-1">{{ article.views }}</span>
                </span>
                <span class="flex items-center cursor-pointer">
                  <heart-outlined class="text-sm sm:text-base" />
                  <span class="ml-1">{{ article.likes }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 - 移动端简化 -->
    <div class="mt-6 sm:mt-8 flex justify-center">
      <a-pagination
        v-model:current="params.page"
        :total="total"
        :page-size="params.pageSize"
        show-quick-jumper
        class="sm:pagination-large"
      />
    </div>
  </div>
</template>

<style scoped>
/* 设置基础动画属性 */
.animate__animated {
  --animate-duration: 0.8s;
  opacity: 0; /* 初始状态不可见 */
  animation-fill-mode: forwards; /* 保持动画结束状态 */
}

/* 移动端优化 */
@media (max-width: 640px) {
  .animate__animated {
    --animate-duration: 0.6s;
  }

  :deep(.ant-pagination-item),
  :deep(.ant-pagination-prev),
  :deep(.ant-pagination-next),
  :deep(.ant-pagination-jump-prev),
  :deep(.ant-pagination-jump-next) {
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 2px;
  }

  :deep(.ant-pagination-item a) {
    padding: 0 6px;
    font-size: 12px;
  }

  :deep(.ant-tag) {
    padding: 0 6px;
    margin-right: 0;
  }
}
</style>
